/**
 * container: document.getElementById('dplayer'),
 video: {
      pic: 'http://img.zcool.cn/community/01f09e577b85450000012e7e182cf0.jpg@1280w_1l_2o_100sh.jpg',
      type: 'auto',
      quality: [{
        name: '高清',
        url: 'http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4'
      },
        {
          name: '流畅',
          url: 'http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4'
        }],
      defaultQuality: 1
    }
 */
function DPlayerSet(dp) {
  if (dp === undefined) dp = this;
  // 添加自定义样式
  var style_ = '<style>\n' +
      '    .dplayer-controller .dplayer-icons .dplayer-speed {\n' +
      '      position: relative;\n' +
      '      display: inline-block;\n' +
      '      height: 100%;\n' +
      '      z-index: 2;\n' +
      '    }\n' +
      '\n' +
      '    .dplayer-controller .dplayer-icons .dplayer-icon.dplayer-speed-icon {\n' +
      '      color: #fff;\n' +
      '      width: auto;\n' +
      '      line-height: 22px;\n' +
      '      font-size: 14px;\n' +
      '    }\n' +
      '\n' +
      '    .dplayer-controller .dplayer-icons .dplayer-speed .dplayer-speed-mask {\n' +
      '      position: absolute;\n' +
      '      bottom: 38px;\n' +
      '      left: -18px;\n' +
      '      width: 80px;\n' +
      '      padding-bottom: 12px;\n' +
      '    }\n' +
      '\n' +
      '    .dplayer-controller .dplayer-icons .dplayer-speed .dplayer-speed-list {\n' +
      '      display: none;\n' +
      '      font-size: 12px;\n' +
      '      width: 80px;\n' +
      '      border-radius: 2px;\n' +
      '      background: rgba(28, 28, 28, .9);\n' +
      '      padding: 5px 0;\n' +
      '      transition: all .3s ease-in-out;\n' +
      '      overflow: hidden;\n' +
      '      color: #fff;\n' +
      '      text-align: center;\n' +
      '    }\n' +
      '\n' +
      '    .dplayer-controller .dplayer-icons .dplayer-speed .dplayer-speed-item {\n' +
      '      height: 25px;\n' +
      '      box-sizing: border-box;\n' +
      '      cursor: pointer;\n' +
      '      line-height: 25px;\n' +
      '    }\n' +
      '\n' +
      '    .dplayer-speed .dplayer-speed-item:hover {\n' +
      '      background-color: hsla(0, 0%, 100%, .1);\n' +
      '    }\n' +
      '\n' +
      '    .dplayer-speed-item.active {\n' +
      '      color: darkorange;\n' +
      '    }\n' +
      '  </style>';
  document.querySelector('head').insertAdjacentHTML('afterBegin', style_);

  // 修改菜单列表
  var iconsRight = document.querySelector('.dplayer-icons.dplayer-icons-right');
  var setBtn = iconsRight.querySelector('.dplayer-setting');
  var commentBtn = iconsRight.querySelector('.dplayer-comment');
  iconsRight.removeChild(setBtn);  // 隐藏设置
  iconsRight.removeChild(commentBtn);  // 隐藏消息

  var speedDiv = '<div class="dplayer-speed">\n' +
      '  <button class="dplayer-icon dplayer-speed-icon">x1倍速</button>\n' +
      '  <div class="dplayer-speed-mask">\n' +
      '    <div class="dplayer-speed-list">\n' +
      '      <div class="dplayer-speed-item" data-speed="2.0">x2.0</div>\n' +
      '      <div class="dplayer-speed-item" data-speed="1.5">x1.5</div>\n' +
      '      <div class="dplayer-speed-item" data-speed="1.25">x1.25</div>\n' +
      '      <div class="dplayer-speed-item active" data-speed="1.0">正常</div>\n' +
      '      <div class="dplayer-speed-item" data-speed="0.75">x0.75</div>\n' +
      '    </div>\n' +
      '  </div>\n' +
      '</div>';
  iconsRight.insertAdjacentHTML('afterBegin', speedDiv);

  // 设置倍速播放按钮监听
  var speedBox  = iconsRight.querySelector('.dplayer-speed');
  var speedList = speedBox.querySelector('.dplayer-speed-list');
  var speedBtn  = speedBox.querySelector('button');
  var items     =  speedList.querySelectorAll('.dplayer-speed-item');
  function showMenu() {
    speedList.style.display = 'inline-block';
  }
  function hideMenu() {
    speedList.style.display = 'none';
  }
  function setSpeed(speed) {
    dp.speed(speed);
    items.forEach(function (v) {
      if (v.classList.contains('active')) {
        v.classList.remove('active');
      }
      if (v.dataset.speed === speed) {
        v.classList.add('active');
        speedBtn.innerHTML = 'x' + speed + '倍速';
      }
    });
  }
  speedBox.onmouseover = showMenu;
  speedBox.onmouseout = hideMenu;
  items.forEach(function (t) {
    t.addEventListener('click', function (e) {
      setSpeed(e.target.dataset.speed);
    });
  });

  // 切换清晰度监听，还原倍数播放
  dp.on('quality_end', function () {
    setSpeed('1.0');
  });

  // 双击与单击控制
  var timer = null;
  document.querySelector('video').ondblclick=function (e) {
    window.clearTimeout(timer);
    dp.fullScreen.toggle('browser');
  };
  document.querySelector('video').onclick=function (e) {
    e.stopPropagation(); // 阻止事件冒泡
    window.clearTimeout(timer);
    timer = window.setTimeout(function () {
      dp.toggle();
    }, 300);
  };

  return dp;
}

if (DPlayer !== undefined) {
  DPlayer.prototype.DPlayerSet = DPlayerSet;
}
